{% stylesheet %}
.block_newsletter {
    /* padding: 100px 0; */
    text-align: center;
    position: relative;
    background-position: center center;
    background-size: cover;
}
.block_newsletter .block_title{
    text-align: center;
}
.block_newsletter h3 {
    text-align: center;
    font-size: 26px;
}

.block_newsletter .block_detail {
    
}

.block_newsletter .layer_opacity {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.block_newsletter .block_newsletter_content {
    position: relative;
    z-index: 9;
}

.block_newsletter form {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.block_newsletter .newsletter_txt {
    min-height: 46px;
    width: calc(100% - 140px);
    text-indent: 10px;
    border: 1px solid #E8E8E1;
    box-sizing: border-box;
    border-radius: var(--button_border_radius);
}
.block_newsletter .newsletter_txt:focus{
    border: 1px solid #000;
}

.block_newsletter .newsletter_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    min-height: 46px;
    cursor: pointer;
    font-size: 16px;
    overflow: hidden;
    word-break: break-all;
    border-radius: var(--button_border_radius);
}

@media (max-width: 767px) {
    .block_newsletter form {
        flex-wrap: wrap;
    }

    .block_newsletter .newsletter_txt {
        width: 100%;
    }
    .block_newsletter .newsletter_btn {
        width: 100%;
        margin-top: 15px;
    }
}
{% endstylesheet %}
{% assign block_id = block_id | default : section.block_id %}
<div class="block_newsletter {% if section.settings.fullScreen %}full_container_wrapper{% else %}container_wrapper{% endif %}" style="background-image: url({{ section.settings.newsletterBg.src|public_front_asset_url }});background-color:  {{ section.settings.newsletterBgColor }};padding: {{ section.settings.padding.top | abs }}px {{ section.settings.padding.right | abs }}px {{ section.settings.padding.bottom | abs }}px {{ section.settings.padding.left | abs }}px;" >
    <div class="layer_opacity" style="opacity: {{ section.settings.layerOpacity  | divided_by : 100 }}; background-color: {{ section.settings.layerBgColor }};"></div>
    <div class="block_newsletter_content {% if section.settings.format == '2' %}format_style{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail|html_content_filter }}</div>{% endif %}
        </div>
        {% endif %}
        <form>
            <input id="block_newsletter_email_{{block_id}}" name="newsletter_email" type="text" value="" class="newsletter_txt" placeholder="{{ lang.general.email }}">
            <button  name="newsletter_btn" type="button" value="" id="newsletter_btn{{block_id}}" class="newsletter_btn" style="background-color: {{ section.settings.buttonBgColor }};color: {{ section.settings.buttonColor }};" >
              {{ section.settings.buttonName }}
            </button>
        </form>
    </div>
</div>
 
<script type="text/javascript">
  (function(){
    
 const blockSubmitNewsletter = moi.throttle(function(){
        var domEmail =  "#block_newsletter_email_{{block_id}}";
        email = $("#block_newsletter_email_{{block_id}}").val();
        if (email == "")
        {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 5000,
                space: 0,
                content: "{{ lang.general.please_enter_a_valid_email_address }}"
            })
            return;
        }
        $isvalidemail = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(email);
        if (!$isvalidemail)
        {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 1000,
                space: 0,
                content: "{{ lang.general.please_enter_a_valid_email_address }}"
            })
            return;
        }
        const load = moi.nodeShowLoading('#newsletter_btn{{block_id}}','{{ section.settings.buttonColor }}');
        moi.ajax({
            url: '/module/newsletter',
            type: 'POST',
            data: JSON.stringify({
                email: email
            }),
            dataType: 'json',
            cache: false,
            complete: function () {
                  load.close();
            },
            success: function(res) {
                if (res.data && res.data.data) {
                    if(res.data.new_customer){
                        callback_generate_lead()
                    }
                    moi.message(
                        {
                          content: `{{ section.settings.newsletterTip|html_content_filter }}`
                        }
                    );
                } else {
                    moi.tooltip({
                        placement: "top",
                        el: domEmail,
                        timer: 1000,
                        space: 0,
                        content: "{{ lang.general.subscribe_failed }}"
                    })
                }
            },
            error: function() {
                moi.tooltip({
                    placement: "top",
                    el: domEmail,
                    timer: 1000,
                    space: 0,
                    content: "{{ lang.general.connection_fails_please_retry_refresh }}"
                })
            }
        });
        },3000)
        $("#newsletter_btn{{block_id}}").click(function(){
          blockSubmitNewsletter()
        })
  })()
       
</script>   

{% schema %}
{
	"tag": "section",
	"class": "block_newsletter",
	"max_blocks": "",
	"is_global": false,
	"name": {
		"zh_CN": "订阅",
		"en_US": "Subscribe"
	},
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_layout",
			"label": {
				"zh_CN": "内容留白",
				"en_US": "Content blank"
			},
			"id": "padding",
			"default": {
				"top": "70",
				"left": "30",
				"right": "30",
				"bottom": "70"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Subscribe to our newsletter"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Sign up for our email list and get 15% off your first order"
		},
		{
			"type": "card_input",
			"id": "buttonName",
			"label": {
				"zh_CN": "订阅按钮文字",
				"en_US": "Subscribe button text"
			},
			"default": "Subscribe"
		},
		{
			"type": "card_textarea",
			"id": "newsletterTip",
			"label": {
				"zh_CN": "订阅成功文字",
				"en_US": "Subscribe successful text"
			},
			"default": "Subscribe Success"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "背景图片",
				"en_US": "Background image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"id": "newsletterBg"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "fullScreen"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"default": "#000",
			"id": "layerBgColor"
		},
		{
			"type": "card_slider",
			"id": "layerOpacity",
			"max": "100",
			"min": "0",
			"label": {
				"zh_CN": "蒙层透明度",
				"en_US": "Mask transparency"
			},
			"default": "50%"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"default": "#f7f7f7",
			"id": "newsletterBgColor"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "按钮背景颜色",
				"en_US": "Button background color"
			},
			"default": "#ff0000",
			"id": "buttonBgColor"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "图标/按钮文字颜色",
				"en_US": "Icon/button text color"
			},
			"default": "#fff",
			"id": "buttonColor"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"padding": {
				"top": "80",
				"left": "30",
				"right": "30",
				"bottom": "80"
			},
			"title": "Subscribe to our newsletter",
			"detail": "Join our Friends and Family Mailing List",
			"buttonName": "Subscribe",
			"newsletterTip": "Thank you for joining our mailing list!",
			"format": "2",
			"newsletterBg": {
				"src": "",
				"alt": ""
			},
			"fullScreen": false,
			"layerBgColor": "#fff",
			"layerOpacity": "0",
			"buttonBgColor": "#1A2836",
			"buttonColor": "#fff",
			"newsletterBgColor": "#f7f7f7"
		},
		"blocks": []
	}
}
{% endschema %}